import React, { useState, useEffect } from "react";
import { Button } from "antd";
import "./Demo1.less";

// 模拟异步获取请求
const queryData = function () {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([12, 34, 10, 3]);
    }, 1000);
  });
};

const Demo = function Demo(props) {
  let [num, setNum] = useState(0);

  //   需求，在num>5 的时候进行某些useEffect的操作
  //   if (num > 5) { // 这么写会报错
  //     useEffect(() => {
  //       console.log("ok");
  //     });
  //   }

  useEffect(() => {
    if (num > 5) {
      console.log("ok");
    }
  }, [num]);

  //   useEffect 如果设置返回值，则返回值必须是一个函数，【代表组件销毁时触发】；下面的案例中，callback经过async的修饰，返回的是一个promise
  // 实例，不符合要求,会报错
  //   useEffect(async () => {
  //     const res = await queryData();
  //     console.log(res);
  //   }, []);

  //   如果想在第一渲染完毕后发起异步请求

  //   方法一： 用.then 的方式获取
  useEffect(() => {
    queryData().then((data) => {
      //   console.log(data);
    });
  }, [num]);
  //   方法二
  useEffect(() => {
    const next = async () => {
      const res = await queryData();
      console.log(res);
    };
    next();
  }, [num]);

  const handle = () => {
    setNum(num + 1);
  };

  return (
    <div className="demo">
      <span className="num">{num}</span>
      <Button type="primary" size="small" onClick={handle}>
        新增
      </Button>
    </div>
  );
};

export default Demo;
